<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>预览页面</title>

		<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" href="./css/index.css" />
		<link rel="stylesheet" href="./fonts/css/font-awesome.min.css" />

		<style>
			* {
				margin: 0;
				padding: 0;
			}
			body {
				padding: 50px;
				background: #dfe6e9;
				height: 100vh;
				font-family: '微软雅黑', arial, Georgia, Helvetica, sans-serif;
			}
			.page {
				margin-bottom: 20px;
				padding: 10px;
				background: #fff;
				box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);

				font-size: 1rem;
			}
			body {
				padding: 5rem;
				background: #dfe6e9;
				height: 100vh;
				font-family: '微软雅黑', arial, Georgia, Helvetica, sans-serif;
			}
			.page {
				margin-bottom: 2rem;
				padding: 1rem;
				background: #fff;
				box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.1);

				text-align: center;
				color: #718093;
			}
			.page h2 {
				line-height: 80px;

				line-height: 8rem;

				/* width: 100px; */
			}
		</style>
	</head>
	<body>
		<div class="page page1">
			<h2>[HTML&CSS]背景不停渐变</h2>
			<iframe src="./object/[HTML&CSS]背景不停渐变.html" frameborder="0" width="100%" height="500"></iframe>
		</div>
		<div class="page page2">
			<h2>[HTML&CSS]渐变加载动画</h2>
			<iframe src="./object/[HTML&CSS]渐变加载动画.html" frameborder="0" width="100%" height="500"></iframe>
		</div>
		<div class="page page3">
			<h2>[HTML&CSS]绚丽按钮</h2>
			<iframe src="./object/[HTML&CSS]绚丽按钮.html" frameborder="0" width="100%" height="500"></iframe>
		</div>
		<div class="page page4">
			<h2>[HTML&CSS]钟表</h2>
			<iframe src="./object/[HTML&CSS]钟表.html" frameborder="0" width="100%" height="500"></iframe>
		</div>
		<div class="page page5">
			<h2>[HTML&CSS]悬停效果</h2>
			<iframe src="./object/[HTML&CSS]悬停效果.html" frameborder="0" width="100%" height="500"></iframe>
		</div>
		<div class="page page6">
			<h2>[HTML&CSS]Input输入动画</h2>
			<iframe src="./object/[HTML&CSS]Input输入动画.html" frameborder="0" width="100%" height="500"></iframe>
		</div>
		<div class="page page7">
			<h2>[HTML&CSS]分页按钮</h2>
			<iframe src="./object/[HTML&CSS]分页按钮.html" frameborder="0" width="100%" height="500"></iframe>
		</div>
		<div class="page page8">
			<h2>[HTML&CSS]hover效果</h2>
			<iframe src="./object/[HTML&CSS]hover效果.html" frameborder="0" width="100%" height="500"></iframe>
		</div>
		<div class="page page9">
			<h2>[HTML&CSS]伸缩式导航栏</h2>
			<iframe src="./object/[HTML&CSS]伸缩式导航栏.html" frameborder="0" width="100%" height="500"></iframe>
		</div>
		<div class="page page10">
			<h2>[HTML&CSS]社交鼠标悬停效果</h2>
			<iframe src="./object/[HTML&CSS]社交鼠标悬停效果.html" frameborder="0" width="100%" height="500"></iframe>
		</div>
		<div class="page page11">
			<h2>[HTML&CSS]可编辑霓虹灯</h2>
			<iframe src="./object/[HTML&CSS]霓虹灯.html" frameborder="0" width="100%" height="500"></iframe>
		</div>
		<div class="page page12">
			<h2>[HTML&CSS]拟态鼠标</h2>
			<iframe src="./object/[HTML&CSS]拟态鼠标.html" frameborder="0" width="100%" height="600"></iframe>
		</div>
		<div class="page page13">
			<h2>[HTML&CSS]渐变进度条</h2>
			<iframe src="./object/[HTML&CSS]渐变进度条.html" frameborder="0" width="100%" height="500"></iframe>
		</div>
		<div class="page page14">
			<h2>[HTML&CSS]漂浮的幽灵</h2>
			<iframe src="./object/[HTML&CSS]漂浮的幽灵.html" frameborder="0" width="100%" height="600"></iframe>
		</div>

		<div class="page page15">
			<h2>[HTML&CSS]电池充电效果</h2>
			<iframe src="./object/[HTML&CSS]电池充电效果.html" frameborder="0" width="100%" height="600"></iframe>
		</div>
		<div class="page page16">
			<h2>[HTML&CSS]社交按钮发光效果</h2>
			<iframe src="./object/[HTML&CSS]社交按钮发光效果.html" frameborder="0" width="100%" height="600"></iframe>
		</div>
		<div class="page page17">
			<h2>[HTML&CSS]爱心动画</h2>
			<iframe src="./object/[HTML&CSS]爱心动画.html" frameborder="0" width="100%" height="600"></iframe>
		</div>
		<div class="page page18">
			<h2>[HTML&CSS]侧边展开导航栏</h2>
			<iframe src="./object/[HTML&CSS]侧边展开导航栏.html" frameborder="0" width="100%" height="600"></iframe>
		</div>
		<div class="page page19">
			<h2>[HTML&CSS]单选按钮</h2>
			<iframe src="./object/[HTML&CSS]单选按钮.html" frameborder="0" width="100%" height="600"></iframe>
		</div>
		<div class="page page20">
			<h2>[HTML&CSS]二级导航栏</h2>
			<iframe src="./object/[HTML&CSS]二级导航栏.html" frameborder="0" width="100%" height="600"></iframe>
		</div>
		<div class="page page21">
			<h2>[HTML&CSS]立方体</h2>
			<iframe src="./object/[HTML&CSS]立方体.html" frameborder="0" width="100%" height="600"></iframe>
		</div>
		<div class="page page22">
			<h2>[HTML&CSS]日与夜</h2>
			<iframe src="./object/[HTML&CSS]日与夜.html" frameborder="0" width="100%" height="600"></iframe>
		</div>
		<div class="page page23">
			<h2>[HTML&CSS]css切图</h2>
			<iframe src="./object/[HTML&CSS]css切图.html" frameborder="0" width="100%" height="600"></iframe>
		</div>
		<div class="page page24">
			<h2>[HTML&CSS]视差滚动</h2>
			<iframe src="./object/[HTML&CSS]视差滚动.html" frameborder="0" width="100%" height="600"></iframe>
		</div>
		<div class="page page25">
			<h2>[HTML&CSS]瀑布流效果</h2>
			<iframe src="./object/瀑布流效果.html" frameborder="0" width="100%" height="600"></iframe>
		</div>
		<div class="page page26">
			<h2>[HTML&CSS]响应式导航栏</h2>
			<iframe src="./object/[HTML&CSS]响应式导航栏.html" frameborder="0" width="100%" height="600"></iframe>
		</div>
		<div class="page page27">
			<h2>[HTML&CSS]指纹效果</h2>
			<iframe src="./object/[HTML&CSS]指纹效果.html" frameborder="0" width="100%" height="600"></iframe>
		</div>
		<div class="page page28">
			<h2>[HTML&CSS]智慧阴影</h2>
			<iframe src="./object/[HTML&CSS]智慧阴影.html" frameborder="0" width="100%" height="600"></iframe>
		</div>
	</body>
</html>
